<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="icon" href="./images/hospital-icon.png" type="image/x-icon">  <!--在网页标题左侧显示图标-->
    <!--    <link rel="shortcut icon" href="./images/hospital-icon.png" type="image/x-svg">-->
    <link rel="shortcut icon" href="./images/hospital-icon.png" type="image/x-icon"><!--在收藏夹显示图标-->

    <title>注册-门诊管理系统</title>

    <link href="css/style.css" rel="stylesheet">
    <link href="css/iconfont.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9] -->
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

</head>

<body class="login-body">

<div class="container" id="registerApp">

    <form class="form-signin" @submit.prevent="register">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">账户注册</h1>
            <img style="width: 50px;height: 50px" src="images/hospital-icon.png" alt=""/>
            <span style="color: black;font-size: 26px;text-align: center;font-weight: 600;vertical-align: text-bottom">门诊管理系统</span>
        </div>

        <div id="error" class="alert alert-danger"
             style="display: none"
             :class="{'a-block':hasError}">
            <i class="fa fa-exclamation-triangle"></i>
            <span v-text="message">诶呀!一不小心出错啦！</span>
        </div>

        <div class="login-wrap">
            <p>请在下方填写你的个人用户信息</p>
            <input v-model="oms_username" type="text" name="username" placeholder="用户名" class="form-control" autofocus>
            <input v-model="oms_nickname" type="text" name="nickname" placeholder="昵称" class="form-control">
            <input v-model="oms_password" type="password" name="password" placeholder="设置密码6-20个字母、数字、下划线"  pattern="^\w{6,20}$" class="form-control">
            <input v-model="oms_confirm" type="password" name="confirm" placeholder="请重新输入密码" class="form-control">


            <button class="btn btn-lg btn-login btn-block" type="submit">
                <i class="fa fa-check"></i>
            </button>

            <div class="registration">
                已有帐号？
                <a href="login.html" class="">
                    点此登录
                </a>
            </div>

            <br>

            <label class="checkbox">
                <input v-model="termsOfService" type="checkbox" value="agree this condition"> 我同意服务条款和隐私政策
            </label>

        </div>

    </form>
</div>

<!--footer section start-->
<!--页脚部分开始-->
<footer style="position: fixed;bottom: 0;border: solid 0;background-color: rgb(0,0,0,0)">
    2022 &copy; <a href="https://gitee.com/allen-zc/OutpatientManagementSystem" target="_blank" style="color: #7a7676">基于SSM的门诊管理系统</a>
    -
    <a href="https://gitee.com/allen-zc" target="_blank" style="color: #7a7676">AllenChen曾晨</a>
    -
    <p style="display: inline-block">ALL RIGHTS RESERVED.</p>
</footer>
<!--footer section end-->
<!--页脚部分结束-->


<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>

<script src="https://unpkg.zhimg.com/vue"></script>

<!--&lt;!&ndash; 开发环境版本，包含了有帮助的命令行警告 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!--&lt;!&ndash; 生产环境版本，优化了尺寸和速度 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    // 登录
    let registerApp=new Vue({
        el:"#registerApp",
        data:{
            oms_username:'',// 登录用户名
            oms_nickname:'',//昵称
            oms_password:'',//登录密码
            oms_confirm:'',//重复密码
            termsOfService:'',  //服务条款

            hasError:false,
            message:'',//错误消息
        },
        methods:{
            //账户注册
            register:function(){
                alert("开始注册")
                let form=new FormData();

                form.append("username",this.oms_username);
                form.append("nickname",this.oms_nickname);
                form.append("password",this.oms_password);
                form.append("confirm",this.oms_confirm);
                if (!this.termsOfService){
                    alert("请勾选服务条款")
                    this.message = "请勾选服务条款！";
                    this.hasError = true;
                    return;
                }
                if(this.oms_password != this.oms_confirm){
                    alert("确认密码不一致")
                    this.message = "确认密码不一致！";
                    this.hasError = true;
                    return;
                }
                console.log(form);

                axios({
                    url:"/oms/api/register",
                    method:"post",
                    data:form
                }).then(function(r) {
                    if(r.data == 'ok'){
                        alert("注册成功");
                        console.log("注册成功");
                        console.log(r.data);
                        registerApp.hasError = false;
                        location.href = '/login.html?register';
                    }else{
                        alert(r.data)
                        console.log(r.data);
                        registerApp.hasError = true;
                        registerApp.message = r.data;
                    }
                });
            },
        },

    })

</script>

</body>
</html>
